<template>
  <div style="padding:20px">
    <h3>新增展会</h3>
    <el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" style="width:80%" label-width="100px">
      <el-form-item label="展会名" prop="name">
        <el-input v-model="form.name" placeholder="请输入展会名"></el-input>
      </el-form-item>

      <el-form-item label="类别" prop="category">
        <el-input v-model="form.category" style="width:400px" placeholder="请输入类别"></el-input>
      </el-form-item>

      <el-form-item label="展会地点" prop="location">
        <el-input v-model="form.location" style="width:400px" placeholder="请输入展会地点"></el-input>
      </el-form-item>

      <el-form-item label="封面图" prop="cover">
        <el-input v-model="form.cover" style="width:400px" placeholder="请输入封面图链接"></el-input>
      </el-form-item>
      <!--这个后面可以改为自动选择时间-->
      <el-form-item label="活动时间" prop="activityTime">
<!--        <el-input v-model="form.activityTime" style="width:400px" placeholder="请输入活动时间">-->
          <el-date-picker
              v-model="form.activityTime"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
<!--        </el-input>-->
      </el-form-item>

      <el-form-item label="参会人数" prop="participantNums">
        <el-input v-model="form.participantNums" style="width:400px" placeholder="请输入参会人数"></el-input>
      </el-form-item>

      <el-form-item label="详情介绍" prop="detail">
        <el-input v-model="form.detail" type="textarea" style="width:400px" maxlength="1000" placeholder="请输入详情介绍内容"></el-input>
      </el-form-item>

<!--      <el-form-item label="图片" prop="img">-->
<!--        <el-input v-model="form.img" placeholder="请输入图片链接"></el-input>-->
<!--      </el-form-item>-->
    </el-form>

    <div style="text-align:center;margin-top:30px">
      <el-button type="primary" @click="save" size="medium">提交</el-button>
      <!--            <el-button type="danger">返回列表</el-button>-->
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
var dayjs = require('dayjs')

export default {
  name: "AddExhibition",
  data(){

    return{
      params:{
        startTime:'',
        endTime:'',
        data:''
      },
      form:{},
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        detail: [
          {required: true, message: '请输入详情介绍', trigger: 'blur'},
        ],
        location: [
          {required: true, message: '请输入位置', trigger: 'blur'},
        ],
        // activityTime:[
        //   {required: true, message: '请输入活动时间', trigger: 'blur'}
        // ]
      },
      activityTime: '',
    }
  },
  methods: {
    save(){
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
           this.form.startTime=this.form.activityTime[0],
           this.form.endTime=this.form.activityTime[1],
          //  save方法用于提交数据
          request.post('/exhibition/save', this.form).then(res => {
            if (res.code === '200'){
              console.log("开始时间是",this.form.startTime)
              this.$notify.success('新增成功')
              //  新增成功后resetFields清空输入框内数据
              this.$refs['ruleForm'].resetFields();
            } else{
              this.$notify.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>